<template>
  <x-layout>
    <template #scroll>
      <div class="flex flex-col">
        <div
          class="w-100% bg-#454047 h-400 color-white text-40 font-700 flex flex-col gap-40rpx justify-center items-center"
        >
          <div>电影排行榜</div>
          <view class="flex items-center gap-20rpx">
            <image
              src="@/static/image/wandao.svg"
              class="w-50rpx h-50rpx"
              mode=""
            />
            <view
              style="color: #969097;"
              class="text-32 font-700"
            >
              豆瓣 Top10
            </view>
            <image
              class="w-50rpx h-50rpx"
              style="transform: scaleX(-1);"
              src="@/static/image/wandao.svg"
              mode=""
            />
          </view>
        </div>
        <view class="flex flex-col gap-20rpx">
          <view
            class=" p-20rpx bg-white"
            v-for="(item,index) in listData"
            :key="index"
          >
            <view class="ml-10rpx">
              <text
                class="text-24 color-white p-[4rpx_8rpx] border-rd-8rpx"
                :style="{'background-color':index===0?'#ff6679':index===1?'#fa8e54':index===2?'#fec264':'#d0d0c9'}"
              >
                No.{{ index+1 }}
              </text>
            </view>
            <view
              class="flex gap-20rpx mt-20rpx"
            >
              <image
                class="w-150 border-rd-12rpx max-h-240"
                @click="openImg(item)"
                :src="item?.info?.imgurl"
                mode="widthFix"
              />
              <view
                class="flex-1 min-w-0 flex flex-col gap-10rpx text-24 color-#c8c8c8"
              >
                <view
                  class="text-32 font-700 color-#515151"
                >
                  {{ item.title }}
                </view>
                <view class="flex items-center gap-10rpx">
                  <u-rate
                    :model-value="item.info.pingfen/2"
                    active-color="#ffd21e"
                    size="14"
                    inactive-color="#eee"
                    allow-half
                    readonly
                  />
                  {{ item.info.pingfen }}
                </view>
                <view>
                  {{ item.info.pingjia }}
                </view>
                <view>
                  {{ item.info.yanyuan }}
                </view>
              </view>
            </view>
          </view>
        </view>
      </div>
    </template>
  </x-layout>
</template>

<script setup>
import { ref } from 'vue'
import { useRequest } from '@/hooks'
import { doubanMovies } from '@/api/vvan'

const listData = ref([])

const getData = async () => {
  const { data = {} } = await useRequest(doubanMovies)
  listData.value = data
}
getData()

const openImg = (item) => {
  uni.previewImage({
    current: item.info.imgurl,
    urls: [item.info.imgurl],
    success: function (res) {

    },
    fail: function (res) {

    }
  })
}
</script>

<style lang="scss" scoped>

</style>
